<template>
	<view class="home">
		<header>
			<div class="head">
				<p>宏烨找房</p>
				<div class="head_main">
					<p>
						<span>北京</span>
						<span></span>
					</p>
					<input type="text" placeholder="请在这里输入区域/商圈" placeholder-style="color:#fff;font-size:30rpx">
				</div>
			</div>
			<!-- 轮播图 -->
			<div class="swiper">
				<view class="uni-padding-wrap">
					<view class="page-section swiper">
						<view class="page-section-spacing">
						<swiper
							class="swiper"
							:indicator-dots="indicatorDots"
							:autoplay="autoplay"
							:interval="interval"
							:duration="duration"
						>
							<!-- <swiper-item
							v-for="item in swipers"
							:key="item.id"
							>
							<view class="swiper-item uni-bg-red">
								<img class="imgs" :src="'http://157.122.54.189:9060'+item.imgSrc" alt=""/>
							</view>
							</swiper-item> -->
							<swiper-item>
								<img class="imgs" src="https://res.5i5j.com/wap/site/images/newbanner.jpg" alt="">
							</swiper-item>
							<swiper-item>
								<img class="imgs" src="https://imgdwcs.soufunimg.com/2021/05/12/2000k/c2843b410b3c416aa12e74fbe37e6a53.jpg" alt="">
							</swiper-item>
						</swiper>
						</view>
					</view>
				</view>
			</div>
			<!-- 十个小模块 -->
			<div class="content">
				<div v-for="(item,index) in navs" :key="index" @click="goContent(item)">
					<img :src="item.ico" alt="">
					<p>{{item.title}}</p>
				</div>
			</div>
		</header>
		
		<div class="main">
			<!-- 楼市咨询 -->
			<div class="counsel">
				<div class="counsel_head">
					<h3>楼市咨询</h3>
					<p @click="goCounsel">更多</p>
				</div>
				<div class="counsel_main">
					<div v-for="(item,index) in CounselList" :key="item.id">
						<span>TOP{{index}}</span>
						<p>{{item.title}}</p>
					</div>
				</div>
			</div>
			<!-- 热门楼盘 -->
			<div class="hot">
				<div class="hot_head">
					<h3>热门楼盘</h3>
					<p @click="goHot">更多</p>
				</div>
				<div class="hot_main">
					<dl v-for="(item) in hots" :key="item.id">
						<dt>
							<img :src="item.img" alt="">
						</dt>
						<dd>
							<div class="dd_head">
								<h3>{{item.title}}</h3>
								<p>{{item.status_name}}</p>
							</div>
							<p class="dd_xiao">{{item.price}}{{item.price_unit}}</p>
							<div class="dd_types">
								<span v-for="(el,le) in item.build_type" :key="le">{{el}}</span>
							</div>
							<p class="dd_hot"><span>惠</span>{{item.discount}}</p>
						</dd>
					</dl>
				</div>
			</div>
			<!-- 经纪人 -->
			<div class="broker">
				<div class="broker_head">
					<h3>经纪人</h3>
					<p @click="goBroker">更多</p>
				</div>
				<div class="broker_main">
					<div class="borker_main_content">
						<dl v-for="(item) in homeBroker" :key="item.id">
							<dt>
								<img :src="item.img" alt="">
							</dt>
							<dd>
								<h2>{{item.cname}}</h2>
								<p>{{item.introduce}}</p>
								<p class="wx_chat">咨询</p>
							</dd>
						</dl>
					</div>
				</div>
			</div>
			<!-- 二手房 -->
			<div class="second_hand_house">
				<div class="hot_head">
					<h3>二手房</h3>
					<p @click="goSecond">更多</p>
				</div>
				<div class="hot_main">
					<dl v-for="(item) in hots" :key="item.id">
						<dt>
							<img :src="item.img" alt="">
						</dt>
						<dd>
							<div class="dd_head">
								<h3>{{item.title}}</h3>
								<p>{{item.status_name}}</p>
							</div>
							<p class="dd_xiao">{{item.price}}{{item.price_unit}}</p>
							<div class="dd_types">
								<span v-for="(el,le) in item.build_type" :key="le">{{el}}</span>
							</div>
							<p class="dd_hot"><span>惠</span>{{item.discount}}</p>
						</dd>
					</dl>
				</div>
			</div>
		</div>

	</view>
</template>

<script>
import {getSwipers} from '../../server/modules/home';
import {getNavs,getHot,getHomeBroker,getCounsel} from '../../mock/home/index';
	export default {
		data() {
			return {
				swipers:[],
				indicatorDots: true,
				background:['111','222'],
				vertical: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				loop:true,
				navs:[],
				hots:[],
				homeBroker:[],
				CounselList:[]
			}
		},
		mounted() {
			console.log('aaaaaa',getHot())
			// 所有nav图标
			this.navs = getNavs();
			// 所有热门楼盘
			this.hots = getHot();
			// 获取首页经纪人
			this.homeBroker = getHomeBroker();	
			// 获取咨询
			this.CounselList = getCounsel();
		},
		async onLoad() {
			let res = await getSwipers();
			console.log('轮播图.....',res)
			if(res.status == 200){
				this.swipers = res.body;
			}
		},
		methods: {
			goContent(item){
				wx.navigateTo({
  					url: item.url,
				})
			},
			// 去咨询页面
			goCounsel(){
				wx.navigateTo({
					url:'/pages/home/consult/index'
				})
			},
			// 去买房页面
			goHot(){
				wx.navigateTo({
					url:'/pages/home/House/House'
				})
			},
			// 去经纪人页面
			goBroker(){
				wx.navigateTo({
					url:'/pages/home/Broker/Broker'
				})
			},
			// 去二手房页面
			goSecond(){
				wx.navigateTo({
					url:'/pages/home/House/House'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.home{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	header{
		width: 100%;
		.head{
			width: 100%;
			height: 260rpx;
			background: rgba(10,122,242,1);
			>p{
				width: 100%;
				color: white;
				padding-top: 72rpx;
				margin-left: 30rpx;
			}
			.head_main{
				width: 92%;
				height: 60rpx;
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				border-radius: 20rpx;
				background: rgba(144,199,247,1);
				color: white;
				margin-top: 36rpx;
				margin-left: 30rpx;
				p{
					width: 130rpx;
					height: 60rpx;
					padding-left: 20rpx;
					display: flex;
					align-items: center;
					span:nth-child(2){
						width: 0;
						height: 0;
						border-width: 14rpx;
						border-style: solid;
						border-color: white transparent transparent transparent;
						margin-left: 14rpx;
					}
				}
				input{
					border-left: solid white 2rpx;
					padding-left: 30rpx;
				}
			}
			
		}
		.swiper{
			width: 100%;
			.imgs{
				width: 100%;
				height: 340rpx;
			}
		}
		.content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			div{
				width: 19%;
				font-size: 28rpx;
				text-align: center;
				margin-top: 20rpx;
				img{
					width: 100rpx;
					height: 100rpx;
				}
			}
		}
	}
	.main{
		width: 100%;
		box-sizing: border-box;
		padding: 0 20rpx;
		.counsel{
			width: 100%;
			.counsel_head{
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;
				h3{
					font-weight: bolder;
				}
				p{
					font-size: 28rpx;
				}
			}
			.counsel_main{
				width: 98%;
				border: solid 2rpx #eee;
				box-shadow: 6rpx 6rpx 10rpx 6rpx #eee;
				div{
					width: 95%;
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-left: 20rpx;
					span{
						display: inline-block;
						padding: 0 10rpx;
						background: linear-gradient(90deg,#F5DBE1,#F96F6F);
						color: white;
						font-size: 34rpx;
					}
					p{
						font-size: 32rpx;
						width: 80%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						margin-left: 40rpx;
					}
				}
			}
		}
		.hot{
			width: 100%;
			.hot_head{
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;
				h3{
					font-weight: bolder;
				}
				p{
					font-size: 28rpx;
				}
			}
			.hot_main{
				width: 100%;
				dl{
					width: 100%;
					display: flex;
					margin-top: 40rpx;
					dt{
						width: 240rpx;
						height: 240rpx;
						img{
							width: 240rpx;
							height: 240rpx;
							border-radius: 10rpx;
						}
					}
					dd{
						flex: 1;
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						margin-left: 20rpx;
						.dd_head{
							width: 100%;
							display: flex;
							justify-content: space-between;
							h3{
								font-weight: bolder;
							}
							p{
								width: 80rpx;
								height: 50rpx;
								line-height: 50rpx;
								text-align: center;
								border-radius: 5rpx;
								font-size: 28rpx;
								background: rgba(97,211,186,1);
								color: white;
							}
						}
						.dd_xiao{
							width: 100%;
							color: orangered;
						}
						.dd_types{
							width: 100%;
							line-height: 30rpx;
							span{
								display: inline-block;
								border: solid 2rpx #ccc;
								color: #ccc;
								font-size: 24rpx;
								margin: 0 10rpx;
							}
						}
						.dd_hot{
							font-size: 24rpx;
							color: orangered;
							border: solid 2rpx orangered;
							padding-right: 10rpx;
							span{
								display: inline-block;
								background: orangered;
								color: white;
								margin-right: 10rpx;
								width: 34rpx;
    							text-align: center;
							}
						}
					}
				}
			}
		}
		.broker{
			width: 100%;
			.broker_head{
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 30rpx 0;
				h3{
					font-weight: bolder;
				}
				p{
					font-size: 28rpx;
				}
			}
			.broker_main{
				width: 100%;
				height: 340rpx;
				overflow: auto;
				.borker_main_content{
					width: 2700rpx;
					display: flex;
				}
				dl{
					width: 260rpx;
					height: 320rpx;
					border: solid 2rpx #ccc;
					margin-right: 20rpx;
					dt{
						width: 100%;
						text-align: center;
						margin-top: 10rpx;
						img{
							width: 130rpx;
							height: 130rpx;
							border-radius: 50%;
						}
					}
					dd{
						width: 100%;
						display: flex;
						flex-wrap: wrap;
						flex-direction: column;
						justify-content: space-around;
						align-items: center;
						h2{
							width: 260rpx;
							font-weight: bolder;
							font-size: 46rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap;
							text-align: center;
						}
						p{
							width: 260rpx;
							font-size: 30rpx;
							color: #bbb;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space:nowrap;
							text-align: center;
						}
						p:nth-child(3){
							width: 40%;
							height: 50rpx;
							border-radius: 20rpx;
							background: rgba(245,109,108,1);
							color: white;
							margin-top: 20rpx;
							text-align: center;
							line-height: 50rpx;
						}
						// p:nth-child(2):after{
						// 	content: "\e64d";
						// }
					}
				}
			}
		}
		.second_hand_house{
			@extend .hot
		}
	}
}

</style>
